<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Time and Date in 12-hour Format with Seconds</title>
<script>
  // Function to get current time in 12-hour format with seconds
  function getCurrentTime12WithSeconds() {
    const now = new Date();
    let hours = now.getHours();
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();
    let ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // The hour '0' should be '12'
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    const timeString = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
    return timeString;
  }

  // Function to get current date in format YYYY-MM-DD
  function getCurrentDate() {
    const now = new Date();
    const year = now.getFullYear();
    let month = now.getMonth() + 1;
    month = month < 10 ? '0' + month : month;
    let day = now.getDate();
    day = day < 10 ? '0' + day : day;
    const dateString = year + '-' + month + '-' + day;
    return dateString;
  }

  // Function to update the time and date in the HTML
  function updateTimeAndDate() {
    const timeElement = document.getElementById('current-time');
    const dateElement = document.getElementById('current-date');
    if (timeElement && dateElement) {
      timeElement.textContent = getCurrentTime12WithSeconds();
      dateElement.textContent = getCurrentDate();
    }
  }

  // Update time and date when the page loads
  document.addEventListener('DOMContentLoaded', function() {
    updateTimeAndDate();
    // Update time every second
    setInterval(updateTimeAndDate, 1000);
  });
</script>
</head>
<body>
  <p>Current time: <time id="current-time"></time></p>
  <p>Current date: <time id="current-date"></time></p>
</body>
</html>
